<!--
 * @Author: zi.yang
 * @Date: 2021-04-30 23:17:45
 * @LastEditors: zi.yang
 * @LastEditTime: 2021-05-01 00:32:05
 * @Description: In User Settings Edit
 * @FilePath: \take-out-food\src\components\cartcontrol\index.vue
-->
<template>
  <div class="cartcontrol">
    <transition>
      <div
        class="cart-decrease icon-remove_circle_outline"
        v-show="this.food.count > 0"
        @click="decreaseCart"
      ></div>
    </transition>
    <div class="cart-count" v-show="this.food.count > 0">
      {{ this.food.count }}
    </div>
    <div class="cart-add icon-add_circle" @click="addCart"></div>
  </div>
</template>

<script>
export default {
  name: 'CartControl',
  props: {
    food: {
      type: Object,
    },
  },
  mounted() {
    this.$set(this.food, 'count', 0);
  },
  methods: {
    addCart() {
      this.food.count++;
    },
    decreaseCart() {
      this.food.count--;
    },
  },
};
</script>

<style lang="stylus" scoped>
.cartcontrol
  font-size 0
  .cart-decrease,.cart-add
    display inline-block
    font-size 24px
    line-height 24px
    padding 6px
    color rgb(0,160,220)
    cursor:pointer
  .cart-decrease
    &.v-enter,&.v-leave-to
      opacity 0
      transform translate3D(24px,0,0) rotate(360deg)
    &.v-enter-to,&.v-leave
      opacity 1
      transform translate3D(0,0,0) rotate(0deg)
    &.v-enter-active,&.v-leave-active
      transition all .4s linear
  .cart-count
    display inline-block
    vertical-align top
    width 12px
    padding-top 6px
    line-height 24px
    text-align center
    font-size 12px
    color rgb(147,153,159)
</style>
